<template>
  <div class="personal-center-page">
    <main class="main-content">
      <UserProfileCard :user="user" @editProfile="handleEditProfile" />
      <section class="papers-section">
        <h2>我的论文</h2>
        <el-table :data="papers" style="width: 100%">
          <el-table-column prop="title" label="标题" width="200"></el-table-column>
          <el-table-column prop="category" label="类别" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="150"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" @click="viewPaperDetails(scope.row)">查看</el-button>
              <el-button size="mini" type="danger" @click="deletePaper(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import UserProfileCard from '../components/UserProfileCard.vue';
import { ElMessage } from 'element-plus';

const user = ref({
  name: '田湘珍',
  email: 'tianxiangzhen@qq.com',
  role: '学生',
  // avatar: 'https://picsum.photos/200/200'
  avatar: '/src/assets/images/txz.jpg'
});

const papers = ref([
  {
    id: 1,
    title: '人工智能在医疗中的应用',
    category: '计算机科学',
    status: '已提交'
  },
  {
    id: 2,
    title: '新质生产力视域下湖湘“数字工匠”培育路径研究',
    category: '新质生产力',
    status: '已提交'
  },
  {
    id: 3,
    title: '大数据分析技术研究',
    category: '数据科学',
    status: '审核中'
  },
  {
    id: 4,
    title: '基于机器学习的自然语言处理研究',
    category: '数据科学',
    status: '待完成'
  }
]);

const handleEditProfile = () => {
  ElMessage.success('编辑个人信息功能暂未开放');
};

const viewPaperDetails = (paper) => {
  ElMessage.info(`查看论文: ${paper.title}`);
};

const deletePaper = (paper) => {
  ElMessage.warning(`删除论文: ${paper.title}`);
};
</script>

<style scoped>
.personal-center-page {
  font-family: Arial, sans-serif;
  color: #333;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-profile-section {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.papers-section {
  background-color: #fff;
  padding: 20px;
  padding-bottom: 40px;
  border-radius: 10px;
  border: 1px solid #ddd;

}

.papers-section h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #007bff;
}
</style>